<ng-template #defaultButtonTemplate let-action>
  <button class="btn {{action.type? 'btn-' + action.type : ''}} {{action.btnSize? 'btn-' + action.btnSize : ''}}"
          (click)="action.toggle($event)"
          [disabled]="action.disabled">
    <i *ngIf="action.icon" class="{{action.icon}}" aria-hidden="true"></i>
    {{action.buttonText}}
  </button>
  <button type="button"
          class="btn {{action.type? 'btn-' + action.type : ''}} {{action.btnSize? 'btn-' + action.btnSize : ''}} dropdown-toggle"
          aria-haspopup="true"
          [attr.aria-expanded]="true"
          (click)="action.toggle()" [disabled]="action.disabled">
    <span class="caret"></span>
    <span class="sr-only">|</span>
  </button>
</ng-template>

<div class="btn-group {{direction? 'drop' + direction : '' }} {{cssClass}}" [ngClass]="{open: isOpen}">

  <ng-template [ngTemplateOutlet]="buttonTemplate || defaultButtonTemplate"
               [ngTemplateOutletContext]="{ $implicit: this}"></ng-template>

  <ul class="dropdown-menu" role="menu" [@state]="animateState" (@state.done)="afterVisibilityAnimation($event)">
    <ng-container *ngFor="let item of actions">
      <li *ngIf="!item.divider && ! item.header" role="menuitem" [ngClass]="{'disabled': item.disabled}"
          (click)="onActionClick(item)" class="dropdown-item">
        <a><i *ngIf="item.icon" class="{{item.icon}}"></i>&nbsp;{{item.text}}</a></li>
      <li *ngIf="item.header" class="dropdown-header">{{item.text}}</li>
      <li *ngIf="item.divider" class="divider" role="separator"></li>
    </ng-container>
  </ul>
</div>
